<template>
  <div ref="dom" class="charts chart-line"></div>
</template>

<script>
import echarts from 'echarts'
import tdTheme from './theme.json'
echarts.registerTheme('tdTheme', tdTheme)
export default {
  name: 'MyChartLine',
  props: {
    values: Array,
    text: String
  },
  data () {
    return {
      dom: null
    }
  },
  methods: {
  },
  watch: {
    run (ret) {
      console.log(ret)
      this.$nextTick(() => {
        let option = {
          title: {
            text: this.text
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: [this.text]
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['5月', '6月', '7月', '8月', '9月', '11月', '12月']
          },
          yAxis: {
            type: 'value'
          },
          series: [

            {
              name: this.text,
              type: 'line',
              stack: '总量',
              data: this.values
            }
          ]
        }
        this.dom = echarts.init(this.$refs.dom, 'tdTheme')
        this.dom.setOption(option, true)
      })
    }
  },
  mounted () {
    // console.log(this.value, '图标组件获取的值')
    this.$nextTick(() => {
      let option = {
        title: {
          text: this.text
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: [this.text]
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: {
          type: 'value'
        },
        series: [

          {
            name: this.text,
            type: 'line',
            stack: '总量',
            data: this.values
          }
        ]
      }
      this.dom = echarts.init(this.$refs.dom, 'tdTheme')
      this.dom.setOption(option, true)
    })
  }
}
</script>
